<template>
<div>
  <layout ref="layout" :title="title" :closable="false" @on-ok="saverOrUpdate" @on-cancel="back" :loading="loading">
    <Form slot="content" ref="formItem" :model="formItem" :label-width="80">
      <Form-item label="父级" prop="parentName"  :rules="{required: true, message: '父级不能为空', trigger: 'blur'}">
        <Input :readonly="true" search @on-focus="focus" type="text" v-model="formItem.parentName"></Input>
      </Form-item>
      <Form-item label="标题" prop="title" :rules="{required: true, message: '标题不能为空', trigger: 'blur'}">
        <Input type="text" v-model="formItem.title"></Input>
      </Form-item>
      <Form-item label="名称" prop="name" :rules="{required: true, message: '名称不能为空', trigger: 'blur'}">
        <Input type="text" v-model="formItem.name"></Input>
      </Form-item>
      <Form-item label="路径" prop="path" :rules="{required: true, message: '路径不能为空', trigger: 'blur'}">
        <Input type="text" v-model="formItem.path"></Input>
      </Form-item>
      <Form-item label="图标" prop="icon" :rules="{required: true, message: '图标不能为空', trigger: 'blur'}">
        <Input type="text" v-model="formItem.icon"></Input>
      </Form-item>
      <Form-item label="组件" prop="view" :rules="{required: true, message: '组件不能为空', trigger: 'blur'}">
        <Input type="text" v-model="formItem.view"></Input>
      </Form-item>
      <Form-item label="序号" prop="ord">
        <InputNumber :max="100" :min="1" v-model="formItem.ord"></InputNumber>
      </Form-item>
      <Row>
        <Col span="8">
          <Form-item label="面包屑" prop="hideInBread">
            <i-switch v-model="formItem.hideInBread"></i-switch>
          </Form-item>
        </Col>
        <Col span="8">
          <Form-item label="菜单栏" prop="hideInMenu">
            <i-switch v-model="formItem.hideInMenu"></i-switch>
          </Form-item>
        </Col>
        <Col span="8">
          <Form-item label="总是显示" prop="isSystem">
            <i-switch type="text" v-model="formItem.showAlways"></i-switch>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </layout>
  <layout ref="parents" width="200px" @on-ok="selectParents">
    <Tree slot="content" :data="data1"></Tree>
  </layout>
</div>
</template>

<script>
import Vue from 'vue'
import layout from '@/components/layout/layout.vue'
import { getAllMenuList, saveOrUpdateMenu, infoMenu } from '../../../api/sys/menu'

export default {
  name: 'menu-save-update',
  data () {
    return {
      loading: false,
      data1: [],
      currentState: '',
      formItem: {
        parentName: '',
        parentId: ''
      },
      selectData: {}
    }
  },
  components: {
    layout
  },
  computed: {
    title () {
      return this.currentState === 'edit' ? '编辑菜单' : (this.currentState === 'add' ? '新增菜单' : '')
    }
  },
  methods: {
    saverOrUpdate () {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          saveOrUpdateMenu(this.formItem).then(res => {
            if (res.code === 200) {
              this.$refs['layout'].hide()
              this.back()
            }
          })
        }
      })
    },
    getTreeMenu  (arr, parentId) {
      let temp = []
      let treeArr = arr
      treeArr.forEach((item, index) => {
        if (item.parentId === parentId) {
          let obj = {}
          obj.title = treeArr[index].title
          obj.id = treeArr[index].id
          obj.icon = treeArr[index].icon
          obj.expand = true
          obj.active = this.formItem.parentId === treeArr[index].id
          if (this.getTreeMenu(treeArr, treeArr[index].id).length > 0) {
            // 递归调用此函数
            obj.children = this.getTreeMenu(treeArr, treeArr[index].id)
          }
          obj.render = (h, { root, node, data }) => {
            return h('span',
              {
                style: {
                  cursor: 'pointer',
                  padding: '4px'
                },
                attrs: {
                  class: data.active ? 'ivu-tree-title-selected' : ''
                },
                on: {
                  'click': () => {
                    this.select(data)
                  }
                }
              }, [
                h('CommonIcon', {
                  props: {
                    type: data.icon
                  },
                  style: {
                    marginRight: '8px'
                  }
                }),
                h('span', data.title)
              ])
          }
          temp.push(obj)
        }
      })

      return temp
    },
    select (data) {
      this.changeClass(this.data1, data.id)
      this.selectData = data
    },
    changeClass (arr, id) {
      arr.forEach(item => {
        if (id === item.id) {
          item.active = true
        } else {
          item.active = false
        }
        if (item.children !== undefined) {
          this.changeClass(item.children, id)
        }
      })
    },
    focus () {
      getAllMenuList().then(res => {
        this.data1 = [ {
          id: 0,
          title: '顶级目录',
          active: this.formItem.parentId === 0,
          expand: true,
          children: this.getTreeMenu(res.data, 0),
          render: (h, { root, node, data }) => {
            return h('span',
              {
                style: {
                  cursor: 'pointer',
                  padding: '4px'
                },
                attrs: {
                  class: data.active ? 'ivu-tree-title-selected' : ''
                },
                on: {
                  'click': () => {
                    this.select(data)
                  }
                }
              }, data.title)
          }
        }]
        this.$refs['parents'].show()
      })
    },
    selectParents () {
      Vue.set(this.formItem, 'parentName', this.selectData.title)
      Vue.set(this.formItem, 'parentId', this.selectData.id)
      this.$refs['parents'].hide()
    },
    back () {
      this.formItem = {}
      this.currentState = 'normal'
      this.$refs['formItem'].resetFields()
      this.$emit('showTable')
    },
    showAdd () {
      this.loading = true
      this.formItem = {
        parentName: '顶级目录',
        parentId: 0,
        ord: 1
      }
      this.currentState = 'add'
      this.$refs['layout'].show()
      this.loading = false
    },
    showEdit (id) {
      this.loading = true
      infoMenu(id).then(res => {
        this.formItem = res.data
        if (this.formItem.hideInBread === null) {
          this.formItem.hideInBread = false
        }
        if (this.formItem.showAlways === null) {
          this.formItem.showAlways = false
        }
        if (this.formItem.hideInMenu === null) {
          this.formItem.hideInMenu = false
        }
        if (this.formItem.ord === null) {
          this.formItem.ord = 1
        }
        if (this.formItem.parentName === null) {
          this.formItem.parentName = '顶级目录'
        }

        this.currentState = 'edit'
        this.$refs['layout'].show()
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
  /deep/ .ivu-modal-header {
    padding-top: 0px;
    padding-bottom: 0px;
    background: #f8f8f8;
    height: 42px;
  }

  /deep/ .ivu-modal-close {
    top: 5px;
  }

  /deep/ .ivu-modal-content {
    border-radius: 0px;
  }

  /deep/ .ivu-modal-header-inner {
    height: 42px;
    line-height: 42px;
  }

  /deep/ .ivu-modal-footer {
    background: #f0f4f7;
  }

  .ivu-modal-contract {
    z-index: 1;
    font-size: 12px;
    position: absolute;
    right: 40px;
    top: 2px;
    overflow: hidden;
    cursor: pointer;
  }

  .title {
    height: 42px;
    line-height: 42px;
  }
</style>
